<template>
  <div class="data-stat--item d-flex flex-a-c f14">
    <div class="dt-circle ml6 d-flex flex-a-c flex-ju-c">
      <IconButton :icon="item.icon" class="pointer-none" :class="'ds-' + item.icon" :activated="false"></IconButton>
    </div>
    <span class="ml5 mr5">{{ item.text }}</span>
    <span class="bold">{{ item.num | filterNumhan }}</span>
  </div>
</template>

<script>
export default {
  name: 'DataStatItem',

  props: {
    item: Object
  }
}
</script>

<style lang="less" scoped>
.data-stat--item {
  flex-shrink: 0;
  // width: 184px;
  width: 29.5%;
  height: 56px;
  margin-right: 2.6%;
  background-color: rgba(23, 100, 206, 0.06);
  border-radius: 30px;
  box-shadow: 0 0 5px rgba(255, 246, 248, 0.3);

  .dt-circle {
    width: 40px;
    height: 40px;
    color: var(--app-text-3);
    box-shadow: 0 0 5px rgba(23, 100, 206, 0.4);
    background-color: var(--app-text-active);
    border-radius: 50%;

    .ds-clicked {
      margin-left: 3px;
      margin-top: 2px;
    }
    .ds-comment {
      margin-top: 4px;
    }
    .ds-praise {
      margin-left: 2px;
    }
  }
  .bold {
    color: var(--app-text-1);
  }
}
.data-stat--item:nth-of-type(3n) {
  margin-right: 0;
}

.data-stat--item:nth-of-type(n + 4) {
  margin-top: 20px;
}
</style>
